<script setup lang="ts">
import {
  NButton,
  NDataTable,
  useMessage,
  NModal,
  NForm,
  NPagination,
  NFormItem,
  NInput,
  NSelect,
  NDatePicker,
  NInputNumber,
  NTreeSelect,
  NScrollbar,
  NTag,
  type FormItemRule,
  type SelectOption,
  type DataTableColumns,
  type FormInst,
  NImage,
  NFlex,
  type UploadFileInfo
} from 'naive-ui'
import router from '@/router'
import { useRoute } from 'vue-router'
import { ref, h, reactive, onMounted, computed } from 'vue'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import type { HttpResponse, HttpResponsePagination } from '@/utils/http'
import type { BatchItemModel, BatchDetailModel } from '@/api/batchV2'
import SealApplicationFile from './components/SealApplicationFile.vue'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import useRouteReplace from '@/hooks/useRouteReplace'
import useFlush from '@/hooks/useFlush'
import type { DicTreeModel } from '@/api/dic'
// import VUploader from '@/components/VUploaderV3/VUploader.vue'
// import type { CustomFile } from '@/components/VUploaderV3/types'
import VScope from '@/views/OA/Common/Scope.vue'
import FUploader from './components/FUploader.vue'

const message = useMessage()
const route = useRoute()
const routeReplace = useRouteReplace(route.query.redirect as string)
useFlush('flushEditBatchTable', () => queryTableData(true))

const createLimitRule = (len: number): FormItemRule => {
  return {
    trigger: ['blur', 'input'],
    message: `不能超过${len}字`,
    validator: (_, value) => (value ? value.length <= len : true)
  }
}

// 选择的线索详情
const handleUpdateClueId = (id: number) => {
  // @ts-ignore
  batchInfo.value.transferor = null
  // @ts-ignore
  batchInfo.value.transferorPhone = null
  transferSelectOptions.value = []
  batchInfo.value.clueId = id
  queryClueInfo(String(id))
}
interface ClueModel {
  collectorId: string
  concatUser: string
  concatUserPhone: string
}
const clueInfo = ref<ClueModel | null>(null)
const queryClueInfo = async (id: string) => {
  try {
    const [error, res] = await sendRequest<HttpResponse<ClueModel>>({
      module: 'clue',
      api: 'infoManage',
      uri: {
        id
      }
    })

    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    clueInfo.value = res.data
    batchInfo.value.transferor = res.data.concatUser
    batchInfo.value.transferorPhone = res.data.concatUserPhone

    sendRequest({
      module: 'collector',
      api: 'info',
      uri: {
        id: res.data.collectorId
      }
    })
      .then(([_, res]) => {
        if (res) {
          collectorName.value = res.data.userName
          transferSelectOptions.value = res.data.transferList || []
        }
      })
      .catch(() => {
        collectorName.value = null
        transferSelectOptions.value = []
      })
  } catch (error) {
    console.error(error)
  }
}

const clueSelectOptions = ref<SelectOption[]>([])
const clueSelectLoading = ref(false)
const queryClueSelectOptions = async () => {
  clueSelectLoading.value = true
  try {
    const [error, res] = await sendRequest<HttpResponse<DicTreeModel[]>>({
      module: 'batchV2',
      api: 'clueList'
    })

    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    clueSelectOptions.value = res.data
  } catch (error) {
    console.error(error)
  } finally {
    clueSelectLoading.value = false
  }
}

const clueMethodOptions = reactive<DicTreeModel[]>([])
const clueMethodLoading = ref(false)
const queryClueMethodOptions = async () => {
  clueMethodLoading.value = true
  try {
    const [error, res] = await sendRequest<HttpResponse<DicTreeModel[]>>({
      module: 'dic',
      api: 'getTree',
      override: {
        params: {
          dicCode: 'A30'
        }
      }
    })

    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    clueMethodOptions.length = 0
    clueMethodOptions.push(...(res.data[0] ? res.data[0].children || [] : []))
  } catch (error) {
    console.error(error)
  } finally {
    clueMethodLoading.value = false
  }
}
const isTrue = ref(false)
const changeTree = (v: string, o: DicTreeModel) => {
  batchInfo.value.solicitMethodCode = v
  batchInfo.value.solicitMethod = o.name
  if (batchInfo.value.solicitMethodCode === 'A3007') {
    isTrue.value = true
  } else {
    isTrue.value = false
  }
}

const formInst = ref<FormInst | null>(null)
const batchInfo = ref({} as BatchDetailModel)
const collectorName = ref<string | null>(null)
const transferSelectOptions = ref([] as any)

const contactsModalVisible = ref(false)
const handleContactsModalSubmit = (v: any[]) => {
  batchInfo.value.batchReceivers = v
  contactsModalVisible.value = false
  batchInfo.value.receiver = v.map((e) => e.typeName).join(',')
}
const handleDeleteContact = (index: number) => {
  batchInfo.value.batchReceivers.splice(index, 1)
  batchInfo.value.receiver = batchInfo.value.batchReceivers.map((e) => e.typeName).join(',')
}

// 征集方式是否为寄存代管(A3007)
const isJCDG = computed(() => batchInfo.value.solicitMethodCode === 'A3007')

const fileList = ref<UploadFileInfo[]>([])
const queryBatchInfo = async () => {
  const [error, res] = await sendRequest<HttpResponse<BatchDetailModel>>({
    module: 'batchV2',
    api: 'detail',
    override: {
      params: {
        id: route.params.id
      }
    }
  })
  if (error) return message.error(error.message)

  queryClueInfo(String(res.data.clueId))

  if (res.data.endTime) {
    res.data.endTime = res.data.endTime.slice(0, 10)
  }
  if (res.data.startTime) {
    res.data.startTime = res.data.startTime.slice(0, 10)
  }
  if (res.data.solicitNum) {
    res.data.solicitNum = Number(res.data.solicitNum)
  }
  if (res.data.batchManageReceivers) {
    res.data.batchReceivers = res.data.batchManageReceivers
  }
  fileList.value = await queryFileList(res.data.fileIds)
  batchInfo.value = res.data
}

const queryFileList = async (filesIds: string): Promise<UploadFileInfo[]> => {
  try {
    const [error, res] = await sendRequest<
      HttpResponse<
        {
          name: string
          path: string
          id: string
          type: string
        }[]
      >
    >({
      module: 'upload',
      api: 'list',
      override: {
        params: {
          ids: filesIds
        }
      }
    })
    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)

    return res.data.map((e) => ({
      id: e.id,
      name: e.name,
      url: e.path,
      status: 'finished',
      file: {
        remoteId: e.id
      }
    })) as unknown as UploadFileInfo[]
  } catch (error) {
    return []
  }
}

const submitLoading = ref(false)
const handleSubmit = () => {
  formInst.value?.validate(async (error) => {
    if (error) return
    submitLoading.value = true

    try {
      const [error, res] = await sendRequest<HttpResponse>({
        module: 'batchV2',
        api: 'update',
        override: {
          data: {
            ...batchInfo.value,
            fileIds: fileList.value
              ? // @ts-ignore
                fileList.value.map((e) => e.file?.remoteId).join(',')
              : null
          }
        }
      })
      if (error) throw error
      if (res.code !== 0) throw new Error(res.msg)
      message.success(res.msg)
      window.flags.flushBatch = true
      routeReplace()
    } catch (error) {
      if (!(error instanceof Error)) return
      message.error(error.message)
    } finally {
      submitLoading.value = false
    }
  })
}

const modalVisibleExport = ref(false)
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    queryTableData()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    queryTableData()
  }
})
const rowKey: any = (row: BatchItemModel) => row.id
const rowKeys = ref<number[]>([])
const columns: DataTableColumns<BatchItemModel> = [
  {
    type: 'selection',
    fixed: 'left'
  },
  {
    key: 'index',
    title: '序号',
    width: 60,
    align: 'center',
    render: (_, rowIndex: number) => rowIndex + 1
  },
  {
    title: '类型',
    key: 'itemTypeName'
  },
  {
    title: '名称',
    key: 'itemName'
  },
  {
    title: '数量',
    key: 'itemNum'
  },
  {
    title: '年代',
    key: 'years'
  },
  {
    title: '备注',
    key: 'remark'
  },
  {
    title: '图片',
    key: 'imageIds',
    render({ _imageFiles }) {
      if (!_imageFiles) return
      return h(
        NFlex,
        {},
        {
          default: () =>
            _imageFiles.map((e) =>
              h(NImage, {
                src: e.path,
                width: 50
              })
            )
        }
      )
    }
  },
  {
    title: '鉴定状态',
    key: 'identifyStatus'
  },
  {
    title: '点交状态',
    key: 'djStatus'
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    align: 'center',
    fixed: 'right',
    render: (e) => [
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          style: {
            display: e.edit ? 'inline-flex' : 'none'
          },
          onClick: () => handleEdit(e)
        },
        {
          default: () => '编辑'
        }
      ),
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          style: {
            display: e.detail ? 'inline-flex' : 'none'
          },
          onClick: () => handleDetail(e)
        },
        {
          default: () => '详情'
        }
      ),
      h(
        NButton,
        {
          type: 'error',
          quaternary: true,
          style: {
            display: e.delete ? 'inline-flex' : 'none'
          },
          onClick: () => handleDelete(e.id)
        },
        {
          default: () => '删除'
        }
      )
    ]
  }
]

const tableLoading = ref(false)
const tableData = ref<BatchItemModel[]>([])
const queryTableData = async (flush = false) => {
  tableLoading.value = true
  if (flush) paginationReactive.page = 1
  const [error, res] = await sendRequest<HttpResponsePagination<BatchItemModel>>({
    module: 'batchV2',
    api: 'batchItems',
    override: {
      params: {
        batchId: route.params.id,
        page: paginationReactive.page,
        limit: paginationReactive.pageSize
      }
    }
  })
  tableLoading.value = false
  if (error) return message.error(error.message)
  paginationReactive.itemCount = res.data.totalCount
  tableData.value = res.data.list

  tableData.value.forEach((item) => {
    if (!item.imageIds) return
    sendRequest({
      module: 'upload',
      api: 'list',
      override: {
        params: {
          ids: item.imageIds
        }
      }
    }).then(([error, res]) => {
      if (error || res.code !== 0) return
      item._imageFiles = res.data
    })
  })
}

//上传附件的数据
const getTableValue = (v: any) => {
  tableData.value = tableData.value.concat(v)
}
const handleEdit = (e: BatchItemModel) => {
  router.push({
    name: 'editBatchItem',
    params: {
      id: route.params.id,
      itemId: e.id
    },
    query: {
      type: 'u',
      redirect: route.fullPath
    }
  })
}
const handleDetail = (e: BatchItemModel) => {
  router.push({
    name: 'detailBatchItem',
    params: {
      id: route.params.id,
      itemId: e.id
    },
    query: {
      type: 'r',
      redirect: route.fullPath
    }
  })
}
const add = () => {
  router.push({
    name: 'addBatchItem',
    params: { id: route.params.id },
    query: {
      type: 'c',
      redirect: route.fullPath
    }
  })
}

const ids = ref()
const idDDel = ref(false)
const modalVisible = ref(false)
const handleDelete = (id: any) => {
  ids.value = id
  idDDel.value = false
  modalVisible.value = true
}
const againDelete = async () => {
  const [error] = await sendRequest<HttpResponse>({
    module: 'batchV2',
    api: 'deleteBatchItems',
    override: {
      data: deleteIds.value.length > 0 && idDDel.value ? deleteIds.value : [ids.value]
    }
  })
  if (error) return message.error(error.message)
  queryTableData()
  modalVisible.value = false
  message.success('删除成功！')
  rowKeys.value = []
  deleteIds.value = []
}
const deleteIds = ref<number[]>([])
const rowKeysChange = (v: (number | string)[]) => {
  rowKeys.value = v as number[]
  deleteIds.value = v as number[]
}
const BatchDelete = () => {
  if (deleteIds.value.length === 0) return message.warning('请至少选择一项！')
  idDDel.value = true
  modalVisible.value = true
}
const btnDownload = async () => {
  const [error, res, headers] = await sendRequest<HttpResponse>({
    module: 'batchV2',
    api: 'downloadTemplate'
  })
  if (error) return message.error(error.message)
  download(headers, res)
}
//导出
function download(headers: any, data: any, name?: string) {
  const val = headers['content-disposition']?.match(/(?<=filename=)(.*)/)
  let filename = val ? decodeURIComponent(val[0]) : name + '导出.xlsx'
  // if (!filename.includes('xlsx')) {
  //   filename = filename.replace('xls', 'xlsx')
  // }
  const a = document.createElement('a')
  let binaryData = []
  binaryData.push(data)
  a.href = window.URL.createObjectURL(new Blob(binaryData))
  a.download = filename
  a.click()
  window.URL.revokeObjectURL(a.href)
}

function handleCancel() {
  window.flags.flushBatch = true
  routeReplace()
}

const importErrorModalVisible = ref(false)
const importErrorMessage = ref('')
const importErrorExcelPath = ref('')
const isImportSuccess = ref(false)
const handleImportError = (data: { excelPath: string; result: string }) => {
  if (!data) data = {} as any
  isImportSuccess.value = data.result.includes('全部文件成功导入')
  importErrorMessage.value = data.result
  importErrorExcelPath.value = data.excelPath
  importErrorModalVisible.value = true
}

const handleCancelImport = () => {
  importErrorModalVisible.value = false
}
const handleExport = () => {
  if (importErrorExcelPath.value) {
    const a = document.createElement('a')
    a.href = importErrorExcelPath.value
    a.download = '导入错误.xlsx'
    a.click()
  }
  importErrorModalVisible.value = false
}

onMounted(() => {
  queryClueSelectOptions()
  queryClueMethodOptions()
  queryBatchInfo()
  queryTableData()
})
</script>

<template>
  <DetailFormProvider>
    <div class="edit-batch">
      <div class="ac-title">批次信息</div>
      <NForm
        ref="formInst"
        :model="batchInfo"
        :disabled="submitLoading"
        label-placement="left"
        require-mark-placement="left"
        label-width="100rem"
        class="ac-card form"
      >
        <NFormItem
          label="关联线索："
          path="clueId"
          :rule="{
            required: true,
            message: '关联线索为必填项，请选择',
            trigger: ['change', 'blur']
          }"
        >
          <NSelect
            :value="batchInfo.clueId"
            @update:value="handleUpdateClueId"
            :options="clueSelectOptions"
            :loading="clueSelectLoading"
            placeholder="请选择"
            filterable
          />
        </NFormItem>
        <NFormItem
          label="批次名称："
          path="name"
          :rule="[
            { required: true, message: '批次名称为必填项，请输入', trigger: ['blur', 'input'] },
            createLimitRule(200)
          ]"
        >
          <NInput
            v-model:value="batchInfo.name"
            placeholder="请输入"
          />
        </NFormItem>
        <NFormItem
          label="征集方式："
          path="solicitMethodCode"
          :rule="{
            required: true,
            message: '征集方式为必填项，请选择',
            trigger: ['change', 'blur']
          }"
        >
          <NTreeSelect
            v-model:value="batchInfo.solicitMethodCode"
            :options="clueMethodOptions"
            :loading="clueMethodLoading"
            placeholder="请选择征集方式"
            key-field="code"
            label-field="name"
            @update-value="changeTree"
          />
        </NFormItem>
        <NFormItem
          label="接收时间："
          path="receiveTime"
          :rule="{
            required: true,
            message: '接收时间为必填项，请选择',
            trigger: ['change', 'blur']
          }"
        >
          <NDatePicker
            v-model:formatted-value="batchInfo.receiveTime"
            type="datetime"
            placeholder="请选择"
          />
        </NFormItem>

        <NFormItem
          label="接收人："
          path="receiver"
          :rule="[
            { required: true, message: '接收人为必填项，请输入', trigger: ['input', 'blur'] }
          ]"
        >
          <div class="contacts">
            <NButton
              type="primary"
              ghost
              @click="contactsModalVisible = true"
            >
              选择接收人
            </NButton>
            <NScrollbar style="max-height: 210rem">
              <div
                v-show="batchInfo.batchReceivers?.length"
                class="contacts-content"
              >
                <NTag
                  v-for="(contact, index) in batchInfo.batchReceivers"
                  @close="handleDeleteContact(index)"
                  :key="index"
                  :color="{ color: '#ffffff' }"
                  closable
                  style="justify-content: space-between; gap: 0 10rem"
                >
                  {{ contact.typeName }}
                </NTag>
              </div>
            </NScrollbar>
          </div>
        </NFormItem>
        <NFormItem
          label="征集数量："
          path="solicitNum"
          :rule="{
            required: true,
            message: '征集数量为必填项，请输入',
            type: 'number',
            trigger: ['blur', 'input']
          }"
        >
          <NInputNumber
            v-model:value="batchInfo.solicitNum"
            placeholder="请输入"
            :show-button="false"
            :min="0"
            :max="Number.MAX_SAFE_INTEGER"
          />
        </NFormItem>

        <template v-if="isJCDG">
          <NFormItem
            label="开始时间："
            path="startTime"
            :rule="{
              required: true,
              message: '开始时间为必填项，请选择',
              trigger: ['change', 'blur']
            }"
          >
            <NDatePicker
              v-model:formatted-value="batchInfo.startTime"
              type="date"
              placeholder="请选择"
            />
          </NFormItem>
          <NFormItem
            label="结束时间："
            path="endTime"
            :rule="{
              required: true,
              message: '结束时间为必填项，请选择',
              trigger: ['change', 'blur']
            }"
          >
            <NDatePicker
              v-model:formatted-value="batchInfo.endTime"
              type="date"
              placeholder="请选择"
            />
          </NFormItem>
          <NFormItem
            label="代存期限："
            path="depositPeriod"
            :rule="[
              { required: true, message: '代存期限为必填项，请输入', trigger: ['input', 'blur'] },
              createLimitRule(20)
            ]"
          >
            <NInput
              v-model:value="batchInfo.depositPeriod"
              placeholder="请输入"
            />
          </NFormItem>
        </template>

        <NFormItem label="藏家：">
          <NInput
            v-model:value="collectorName"
            placeholder="/"
            disabled
          />
        </NFormItem>
        <NFormItem label="移交人：">
          <NSelect
            :value="batchInfo.transferor"
            @update:value="
              (e, o: any) => ((batchInfo.transferor = e), (batchInfo.transferorPhone = o.transferPhone))
            "
            :options="transferSelectOptions"
            value-field="transferName"
            label-field="transferName"
            placehoder="请选择移交人"
            style="flex-shrink: 2; max-width: 70%"
          />
          <NInput
            v-model:value="batchInfo.transferorPhone"
            placeholder="/"
            disabled
          />
        </NFormItem>

        <NFormItem
          label="备注："
          path="remark"
          :rule="createLimitRule(200)"
          class="n-form-item--textarea"
        >
          <NInput
            v-model:value="batchInfo.remark"
            type="textarea"
            placeholder="请输入"
            rows="2"
          />
        </NFormItem>

        <NFormItem
          label="附件："
          :show-feedback="false"
          style="grid-column: 1 / -1"
        >
          <FUploader v-model:fileList="fileList" />
        </NFormItem>
      </NForm>

      <div class="br"></div>

      <div class="ac-title">物品信息</div>
      <div class="ac-card dc">
        <div class="edit-batch-ctl-buttons">
          <NButton
            type="warning"
            @click="modalVisibleExport = true"
          >
            模板导入
          </NButton>
          <NButton
            type="warning"
            @click="btnDownload"
          >
            模板下载
          </NButton>
          <NButton
            type="primary"
            @click="add"
          >
            添加
          </NButton>
        </div>
        <NDataTable
          :columns="columns"
          :data="tableData"
          :loading="tableLoading"
          :rowKey="rowKey"
          :checked-row-keys="rowKeys"
          @update:checked-row-keys="rowKeysChange"
        />
        <NButton
          tertiary
          type="error"
          style="width: 115px; margin-top: 10px"
          @click="BatchDelete"
        >
          批量删除
        </NButton>
        <NPagination
          :page-sizes="paginationReactive.pageSizes"
          :item-count="paginationReactive.itemCount"
          :page="paginationReactive.page"
          :page-size="paginationReactive.pageSize"
          @update:page="paginationReactive.onChange"
          @update:page-size="paginationReactive.onUpdatePageSize"
          show-size-picker
          show-quick-jumper
          :suffix="() => '页'"
        >
          <template #prefix>
            <span style="font-size: 14px">共{{ paginationReactive.itemCount }}条</span>
          </template>
        </NPagination>
      </div>
    </div>
  </DetailFormProvider>

  <FixedAction>
    <div class="edit-batch-buttons">
      <NButton
        color="#999999"
        ghost
        :disabled="submitLoading"
        @click="handleCancel"
        style="width: 78px; height: 34px"
      >
        取消
      </NButton>

      <NButton
        color="#5FB17F"
        :disabled="submitLoading"
        :loading="submitLoading"
        @click="handleSubmit"
        style="width: 78px; height: 34px"
      >
        保存
      </NButton>
    </div>
  </FixedAction>

  <NModal
    :auto-focus="false"
    v-model:show="importErrorModalVisible"
  >
    <VDialogContent
      @close="handleCancelImport"
      @submit="handleExport"
      title="导入提示"
      submit-text="导出错误报告"
      close-text="确定"
      :submitVisible="!isImportSuccess"
    >
      <p style="max-width: 400rem">
        {{ importErrorMessage }}
      </p>
    </VDialogContent>
  </NModal>
  <NModal
    :auto-focus="false"
    v-model:show="modalVisible"
  >
    <VDialogContent
      @close="modalVisible = false"
      @submit="againDelete"
      title="删除提示"
    >
      <div style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem">
        您确定要删除吗?
      </div>
    </VDialogContent>
  </NModal>
  <NModal
    :auto-focus="false"
    v-model:show="modalVisibleExport"
  >
    <SealApplicationFile
      :uid="route.params.id as string"
      @getTableValue="getTableValue"
      @close="modalVisibleExport = false"
      @update="queryTableData()"
      @error="handleImportError"
    ></SealApplicationFile>
  </NModal>

  <NModal
    :auto-focus="false"
    v-model:show="contactsModalVisible"
    @close="contactsModalVisible = false"
  >
    <VScope
      @close="contactsModalVisible = false"
      @scopeSubmit="handleContactsModalSubmit"
      :default-list="batchInfo.batchReceivers!"
      flat
    />
  </NModal>
</template>

<style scoped lang="scss">
.edit-batch {
  min-height: 100%;
  padding: 15rem 0 130rem;
  background-color: #f0efee;

  .br {
    position: relative;
    width: 100%;
    padding: 30rem 0;

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      top: 50%;
      left: 0;
      border-top: 1px dotted #bc9e70;
      transform: translateY(-50%);
    }
  }

  .ac-card {
    padding: 20rem;
    background-color: #e1e1e1;

    &.dc {
      display: flex;
      flex-direction: column;
      gap: 16rem 0;
    }

    &.form {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6rem 30rem;

      .n-form-item--textarea {
        grid-column: 1 / -1;
      }

      .n-date-picker,
      .n-input-number {
        flex: 1;
      }
    }
  }

  .ac-title {
    font-size: 26rem;
    margin-bottom: 30rem;
    color: #048c5e;
    line-height: 1;
  }
}

.edit-batch-ctl-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0 16rem;
}

.edit-batch-buttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 16rem;

  .n-button {
    width: 100rem;
    height: 50rem;
  }
}

.contacts {
  display: flex;
  flex-direction: column;
  gap: 10rem 0;

  .n-button {
    max-width: 126rem;
  }

  .contacts-content {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 10rem;
    padding: 15rem;
    background-color: #fff;
  }
}
</style>
